<!--
作者：qzy
时间：20221030
说明：此组件为课程详情下的学生管理的主页面，主要包含学生管理、班级扫码、审核管理等功能
-->
<template>
  <div class="container">
    <div class="left">
      <div class="nav">
        <ul>
          <li
            v-for="(item,index) in tabs"
            :key="index"
            :class="item.comName === current.comName ? 'active' : ''"
            @click="changeItem(item)"
          >
            <span>{{item.name}}</span>
            <el-icon><ArrowRight /></el-icon>
          </li>
        </ul>
      </div>
    </div>
    <div class="right">
      <component :is="current.comName"></component>
    </div>
  </div>
</template>

<script lang='ts' setup>
import student from '@/views/page/tearchertack/mycourse/details/teachingdetails/studentmanage/student/Index.vue';
import ClassScanningCode from '@/views/page/tearchertack/mycourse/details/teachingdetails/studentmanage/ClassScanningCode.vue';
import ExamineMangage from '@/views/page/tearchertack/mycourse/details/teachingdetails/studentmanage/ExamineMangage.vue';
import { ref, markRaw, reactive } from 'vue';

// 定义类型
interface Com {
  name: string,
  comName: any
}
// 导航栏
const tabs = reactive([
  {
    name: '学生管理',
    comName: markRaw(student),
  },
  {
    name: '班级扫码',
    comName: markRaw(ExamineMangage),
  },
  {
    name: '审核管理',
    comName: markRaw(ClassScanningCode),
  },
]);

const current = ref({
  comName: tabs[0].comName,
});

// 导航栏点击事件
const changeItem = (tab: Com) => {
  current.value.comName = tab.comName;
};
</script>

<style lang="scss" src="./index.scss" scoped>

</style>
